const { createApp } = Vue

const app = createApp({
  data() {
    return {
      heroList: [],
      query: {
        key: 'dingwei',
        value: 0,
      },
      keyword: '',
      typeList: {
        zonghe: [
          { name: '本周免费', value: 10 },
          { name: '新手推荐', value: 11 },
        ],
        dingwei: [
          { name: '全部', value: 0 },
          { name: '坦克', value: 3 },
          { name: '战士', value: 1 },
          { name: '法师', value: 2 },
          { name: '刺客', value: 4 },
          { name: '射手', value: 5 },
          { name: '辅助', value: 6 },
        ],
      },
    }
  },
  computed: {
    heroDetail() {
      return (value) => {
        return `https://pvp.qq.com/web201605/herodetail/${value}.shtml`
      }
    },
    heroImage() {
      return (value) => {
        return `https://game.gtimg.cn/images/yxzj/img201606/heroimg/${value}/${value}.jpg`
      }
    },
    filterHeros() {
      const { key, value } = this.query

      const keyword = this.keyword
      if (keyword === '') {
        if (key === 'zonghe') {
          return this.heroList.filter((item) => item.pay_type === value)
        } else if (key === 'dingwei') {
          if (value === 0) {
            return this.heroList
          } else {
            return this.heroList.filter(
              (item) => item.hero_type === value || item.hero_type2 === value
            )
          }
        }
      } else {
        // 关键字查询
        const res = this.heroList.filter((item) => item.cname.includes(keyword))
        const newRes = _.cloneDeep(res)
        newRes.map((item) => {
          // console.log(item)
          item.cname = item.cname.replace(
            keyword,
            `<span style="color:red">${keyword}</span>`
          )
          return item
        })
        return newRes
      }
    },
  },
  methods: {
    changeType(type, value) {
      // console.log(type, value)
      this.query.key = type
      this.query.value = value
      // 重置关键字查询
      this.keyword = ''
    },
    changeKeyword(event) {
      // 设置输入框的数据
      this.keyword = event.target.value
      // 重置条件查询
      this.query.key = 'dingwei'
      this.query.value = 0
    },
  },
  async mounted() {
    const res = await axios.get('http://project.x-zd.net:3001/apis/herolist')
    this.heroList = res.data.data
  },
})
app.mount('#app')
